<template>
    <div style="height: calc( 100% - 48px)">
        <div class="catalog-edit">
            <div class="add-file" @click="setPopup('new')" title="新建文件">
<!--                <img src="../../assets/afile.png" alt="">-->
                <div>新文件</div>
            </div>
<!--            <div class="more-choose"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></div>-->
        </div>
        <div class="catalog-content">
            <div class="file-item" v-for="(work,index) in works" :key='(work,index)' :class="target === index?'fileclass':''" @click="setTarget(index)">
                <div v-show="edit && target === index" class="file-edit">
                    <ul>
                        <li @click="setPopup('rename')">重新命名</li>
                        <li :class="[works.length===1?'delDisabled':'']" @click="setPopup('delete')">删除文件</li>
                    </ul>
                </div>
                <div class="select">
                    <i class="fa fa-play" v-show="target === index"  aria-hidden="true"></i>
                </div>
                <div class="file-name">{{work.name}}</div>
                <i class="fa fa-plus" @click="edit = !edit" aria-hidden="true"></i>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'file-list',
  props: {
    works: {
      type: Array
    },
    target: {
      type: Number
    },
    popup: {
      type: String
    }
  },
  data () {
    return {
      edit: false
    }
  },
  mounted () {
    // 点击其他区域关闭菜单栏
    document.addEventListener('click', (e) => {
      if (!this.$el.contains(e.target)) this.edit = false
    })
  },

  methods: {
    setTarget: function (index) {
      let preIndex = this.target
      if (preIndex !== index) {
        this.$emit('setTarget', index)
      }
    },
    setPopup: function (text) {
      if (text !== 'delete' || this.works.length > 1) {
        this.$emit('setPopup', text)
      }
    }
  }
}
</script>

<style scoped>
    .catalog-edit{
        margin-top: 48px;
        width: 100%;
        height: 50px;
    }
    .catalog-edit>div{
        display: inline-block;
        height: 50px;
        text-align: center;
    }
    .add-file{
        margin-left: 10px;
        width: 60px;
        display: inline-block;
        /*background-color: white;*/
        height: 50px;
        cursor: pointer;
    }
    .add-file>div{
        font-size: 12px;
        height: 30px;
        border-radius: 5px;
        width: 100%;
        background-color: rgb(77,151,254);
        color: white;
        line-height: 30px;
        vertical-align: top;
        margin-top: 10px;
    }
    .add-file>div:hover{
        background-color: rgb(66,128,217);
    }
    .add-file>img{
        height: 20px;
        vertical-align: top;
        margin: auto;
        margin-top: 15px;
    }
    .more-choose{
        float: right;
        width: 40px;
        cursor: pointer;
    }
    .more-choose>i{
        font-size: 12px;
        line-height: 50px;
    }
    .more-choose:hover{
        color: #207fc0;
    }
    .catalog-content{
        height: calc( 100% - 50px);
        width: 100%;
        overflow: auto;
        overflow-x: hidden;
    }
    .file-item{
        width: 100%;
        height: 40px;
        /*background-color: #CCDBEE;*/
        line-height: 40px;
        color: black;
        font-size: 14px;
        /*text-align: right;*/
        cursor: pointer;
        position: relative;
    }
    .file-item>.select{
        color: gray;
        float: left;
        font-size: 10px;
        line-height: 40px;
        width: 40px;
        /*margin: auto;*/
        text-align: center;
        height: 40px;
    }
    .file-item>i:last-child{
        color: black;
        font-size: 12px;
        width: 42px;
        height: 40px;
        /*background-color: dodgerblue;*/
        line-height: 40px;
        float: right;
        /*margin: auto;*/
        text-align: center;
    }
    .file-item>i:last-child:hover{
        color: dodgerblue;
    }
    .fileclass{
        background-color: #CCDBEE;
    }
    .file-name{
        max-width: calc( 100% - 82px);
        width: calc( 100% - 82px);
        display: inline-block;
        margin-left: auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .file-edit{
        width: 80px;
        background-color: white;
        position: absolute;
        top: 40px;
        right: 0;
        border-radius: 5px;
        box-shadow: 0 0 5px -3px black;
        z-index: 10;
    }
    .file-edit>ul{
        list-style-type: none;
        padding: 0;
        margin: 0;
        text-align: center;
    }
    .file-edit>ul>li{
        font-size: 12px;
        height: 30px;
        line-height: 30px;
    }
    .file-edit>ul>li:hover{
        color: white;
        background-color: rgb(77,151,254);
    }
    .file-edit>ul>li:hover:first-child{
        border-radius: 5px 5px 0 0 ;
    }
    .file-edit>ul>li:hover:last-child{
        border-radius: 0 0 5px 5px;
    }
    .delDisabled{
        color: gray;
        background-color: rgb(240,240,240);
        cursor: not-allowed;
    }
    .file-edit>ul>.delDisabled:hover{
        color: gray;
        background-color: rgb(240,240,240);
    }
</style>
